/*
 * 轮播广告
 */
<script>
    //import otherComponent from '@/components/otherComponent.vue';
    
    export default {
        name: "ys-banner",
        components:{
            //otherComponent
        },
        props: {
            
        },
        data() {
            return {
                list: [{'pic' : 'http://children-home.oss-cn-shenzhen.aliyuncs.com/banner/20190610155618259.png', 'url' : '', 'title' : '祝全体小朋友六一儿童节快乐！'}, 
                      {'pic' : 'http://children-home.oss-cn-shenzhen.aliyuncs.com/banner/20190604165115185.png', 'url' : '', 'title' : '湖南省儿童工作资源中心'},
                      {'pic' : 'http://children-home.oss-cn-shenzhen.aliyuncs.com/banner/20190610155636943.jpg', 'url' : '', 'title' : '放飞梦想 展望未来'}
                      ]
            }
        },
        computed: {
            /*
            * 方法注释
            */
            // funName : function() {
            //     return some;
            // }
        },
        methods: {
            /*
             * 方法注释
             */
//             funName : function() {
// 
//             }
        }
    }      
</script>
<template name="ys-banner">
    <swiper :autoplay="true" :circular="true" :interval="3000" :duration="1000" class="ys-banner">
        <swiper-item v-for="(item,index) in list" :key="index" class="item">
            <navigator class="nav">
                <image :src="item.pic" mode="" class="pic" />
                <view class="text-box">
                    <view class="title">{{item.title}}</view>
                    <view class="num">{{(index+1)}}/{{list.length}}</view>                        
                </view>
            </navigator>
        </swiper-item> 
    </swiper>
</template>
<style lang="scss">
    .ys-banner {
        width: 100%;
        .item {
            .nav {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                height: 100%;
                .pic {
                    width: 100%;
                }
                .text-box {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 70upx;
                    margin-top: 20upx;
                    .title {
                        
                    }
                    .num {
                        color: $btn_color
                    }
                }
            }
        }
    }
</style>
